<template>
  <div>
    <a-row :gutter="10" type="flex" justify="center">
      <a-col :md="8" :sm="18">
        <a-card :bordered="false">
          <a-tree
            checkable
            :tree-data="treeData"
            :replace-fields="replaceFields"
          />
        </a-card>
      </a-col>
      <a-col :md="16" :sm="30">
         <a-card :bordered="false" :bodyStyle="bodyStyle">
           <a-form-model :modal="areaList">
             <a-form-item label="区域名称">
                <a-input v-model="areaList.areaName"></a-input>
             </a-form-item>
             <a-form-item label="所属区域">
               <a-input v-model="areaList.sysOrgCode"></a-input>
             </a-form-item>
             <a-form-item label="区域编码">
               <a-input v-model="areaList.areaGovernmentLevel"></a-input>
             </a-form-item>
             <a-form-item label="上级组织">
               <a-input v-model="areaList.parentId"></a-input>
             </a-form-item>
             <a-form-item label="类型">
               <a-radio-group v-model="areaList.areaType">
                <a-radio value="1">区域</a-radio>
                 <a-radio value="2">机构</a-radio>
               </a-radio-group>
             </a-form-item>
             <a-form-item label="备注">
               <a-input v-model="areaList.areaText"></a-input>
             </a-form-item>
             <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
               <a-button type="primary" @click="onSubmit">确定</a-button>
               <a-button style="margin-left: 10px;" @click="empty">重置</a-button>
             </a-form-item>
           </a-form-model>
         </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import {getAction} from '@api/manage'
  import {queryAreaTreeList} from '@/api/api'
  const treeData = [
    {
      areaName: '0-0',
      key: '0-0',
      children: [
        {
          areaName: '0-0-0',
          key: '0-0-0',
          children: [
            { areaName: '0-0-0-0', key: '0-0-0-0' },
            { areaName: '0-0-0-1', key: '0-0-0-1' },
            { areaName: '0-0-0-2', key: '0-0-0-2' },
          ],
        },
        {
          areaName: '0-0-1',
          key: '0-0-1',
          children: [
            { areaName: '0-0-1-0', key: '0-0-1-0' },
            { areaName: '0-0-1-1', key: '0-0-1-1' },
            { areaName: '0-0-1-2', key: '0-0-1-2' },
          ],
        },
        {
          title: '0-0-2',
          key: '0-0-2',
        },
      ],
    },
    {
      areaName: '0-1',
      key: '0-1',
      children: [
        { areaName: '0-1-0-0', key: '0-1-0-0' },
        { areaName: '0-1-0-1', key: '0-1-0-1' },
        { areaName: '0-1-0-2', key: '0-1-0-2' },
      ],
    },
    {
      areaName: '0-2',
      key: '0-2',
    },
  ];
  export default {
    name: 'AreaList',
    data () {
      return {
        arr:[],
        url:{
          listTree:'/paishui/area/spec/tree'
        },
        treeData,
        //可以替换 titile children字段
        replaceFields:{
          title:'areaName'
        },
        areaList:{
          areaName:'',
          sysOrgCode:'',
          areaGovernmentLevel:'',
          parentId:'',
          areaText:'',
          areaType:''
        },
        bodyStyle:{
          height:'100%'
        }
      }
    },
    created() {
      this.listTable()
    },
    methods:{
      listTable(){
        getAction(this.url.listTree).then(res => {
          console.log(res)
          // this.treeData =res.result
        })
      },
      onSubmit(){
        console.log('submit!!!!!',this.areaList)
      },
      empty(){
          this.areaList = {
            areaName: '',
            sysOrgCode: '',
            areaGovernmentLevel: '',
            parentId: '',
            areaText: '',
            areaType: ''
          }
      }
    }
  }
</script>

<style scoped>
 .ant-col-sm-30 >>> .ant-card-body{
   padding: 50px 120px 0;
 }
>>>.ant-row{
  height: 100%;
}
.ant-form-item-control-wrapper >>> .ant-form-item-control{
  text-align: center !important;
}
</style>